import React from "react";
import { connect } from "react-redux";
import { createSelector } from "reselect";

class Summary extends React.Component {
  state = {
    count: 0,
  };
  render() {
    return (
      <div className="card mb-3">
        <div className="card-header py-3">
          <h5 className="mb-0">结算信息</h5>
        </div>
        <div className="card-body">
          <ul className="list-group list-group-flush">
            <li className="list-group-item d-flex justify-content-between align-items-center border-0 px-0 mb-3">
              <div>
                <strong>总价</strong>
              </div>
              <span>
                <strong>¥ {this.props.totalPrice}</strong>
              </span>
            </li>
          </ul>
          <button
            onClick={() => {
              this.setState({ count: this.state.count + 1 });
            }}
            type="button"
            className="btn btn-primary btn-lg btn-block"
          >
            去结算 {this.state.count}
          </button>
        </div>
      </div>
    );
  }
}

// 创建一个状态的选择器
// 1. 输入选择器, 表示你要基于什么状态计算新的状态
// 2. 输出选择器, 表示状态选择器最终要返回的状态
// 返回了一个方法, 用于获取状态, 当前案例中就是商品总价
const selectPrice = createSelector(
  (state) => state.cartReducer.cart,
  (cart) => {
    console.log("totalPrice");
    return cart.reduce((result, item) => {
      return (result += item.count * item.price);
    }, 0);
  }
);

// 每一次 Summary 组件在重新渲染的时候都会重新计算商品总价, 无论该渲染是否是由商品列表引起的
// 只有商品列表中添加了新的商品, 或者删除了某一个商品, 或者商品数量发生了变化, 才有必要重新计算商品总价
// 当组件的 count 发生变化引起的组件重新渲染是没有必要重新计算商品总价的
const mapStateToProps = (state) => ({
  totalPrice: selectPrice(state),
});

// reselect 它可以实现类似 VUE 中的计算属性功能
// 通过 reselect 库我们可以从 redux 中获取状态, 并基于该状态计算新的状态, 基于的状态如果没有发生变化, 不会重新计算新状态, 它会有状态缓存功能
// 1. npm install reselect
// 2. import { createSelector } from "reselect";
/*
 *   const selectPrice  = createSelector((state) => state.cartReducer.cart, (cart) => {
 *     return 基于 cart 计算的商品总价
 *   });
 * */

export default connect(mapStateToProps)(Summary);
